<template>
    <div @click="addCircle" class="container">
      <div
        v-for="(circle, index) in circles"
        :key="index"
        class="circle"
        :style="{ left: circle.x + 'px', top: circle.y + 'px' }"
      ></div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const circles = ref([]);
  
  const addCircle = (event) => {
    //getBoundingClientRect() 是一个用于获取元素的大小及其相对于视口的位置的DOM方法。
    const rect = event.target.getBoundingClientRect();
    const newCircle = {
      x: event.clientX - rect.left - 25, // 使圆圈居中
      y: event.clientY - rect.top - 25, // 使圆圈居中
    };
    circles.value.push(newCircle);
  }
  </script>
  
  <style scoped>
  .container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f0f0f0; /* 背景颜色 */
    overflow: hidden; /* 防止圆圈超出边界 */
  }
  
  .circle {
    position: absolute;
    width: 50px; /* 圆圈的直径 */
    height: 50px; /* 圆圈的直径 */
    background-color: rgba(255, 0, 0, 0.5); /* 圆圈颜色 */
    border-radius: 50%; /* 使元素为圆形 */
    pointer-events: none; /* 使圆圈不阻塞鼠标事件 */
  }
  </style>